<template>
	<view class="nearby-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<text class="iconfont icon-arrow-left"></text>
				</view>
				<view class="navbar-title">周边</view>
				<view class="navbar-right">
					<text class="iconfont icon-search"></text>
				</view>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<text class="iconfont icon-search search-icon"></text>
				<input type="text" placeholder="搜索周边服务" v-model="searchKeyword" />
			</view>
		</view>

		<!-- 分类导航 -->
		<view class="category-nav">
			<scroll-view scroll-x="true" class="category-scroll">
				<view class="category-list">
					<view 
						class="category-item" 
						:class="{ active: currentCategory === item.id }"
						v-for="item in categories" 
						:key="item.id"
						@click="selectCategory(item.id)"
					>
						<image :src="item.icon" class="category-icon"></image>
						<text class="category-name">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" @click="showSortModal">
				<text>{{ currentSort.name }}</text>
				<text class="iconfont icon-arrow-down"></text>
			</view>
			<view class="filter-item" @click="showFilterModal">
				<text>筛选</text>
				<text class="iconfont icon-filter"></text>
			</view>
		</view>

		<!-- 商家列表 -->
		<scroll-view 
			scroll-y="true" 
			class="merchant-list"
			@scrolltolower="loadMore"
			refresher-enabled="true"
			@refresherrefresh="onRefresh"
			:refresher-triggered="refreshing"
		>
			<view class="merchant-item" v-for="item in merchantList" :key="item.id" @click="goToDetail(item.id)">
				<image :src="item.image" class="merchant-image"></image>
				<view class="merchant-info">
					<view class="merchant-header">
						<text class="merchant-name">{{ item.name }}</text>
						<view class="merchant-tags">
							<text class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</text>
						</view>
					</view>
					<view class="merchant-desc">{{ item.description }}</view>
					<view class="merchant-rating">
						<view class="rating-stars">
							<text class="star" v-for="n in 5" :key="n" :class="{ active: n <= item.rating }">★</text>
						</view>
						<text class="rating-score">{{ item.rating }}</text>
						<text class="rating-count">({{ item.reviewCount }}条评价)</text>
					</view>
					<view class="merchant-footer">
						<view class="merchant-distance">
							<text class="iconfont icon-location"></text>
							<text>{{ item.distance }}</text>
						</view>
						<view class="merchant-price">
							<text class="price-label">人均</text>
							<text class="price">¥{{ item.avgPrice }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMore">
				<text>加载更多...</text>
			</view>
			<view class="no-more" v-else>
				<text>没有更多了</text>
			</view>
		</scroll-view>

		<!-- 排序弹窗 -->
		<uni-popup ref="sortPopup" type="bottom">
			<view class="sort-modal">
				<view class="modal-header">
					<text class="modal-title">排序方式</text>
					<text class="modal-close" @click="closeSortModal">×</text>
				</view>
				<view class="sort-options">
					<view 
						class="sort-option" 
						:class="{ active: currentSort.id === item.id }"
						v-for="item in sortOptions" 
						:key="item.id"
						@click="selectSort(item)"
					>
						<text>{{ item.name }}</text>
						<text class="iconfont icon-check" v-if="currentSort.id === item.id"></text>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 筛选弹窗 -->
		<uni-popup ref="filterPopup" type="bottom">
			<view class="filter-modal">
				<view class="modal-header">
					<text class="modal-title">筛选条件</text>
					<text class="modal-close" @click="closeFilterModal">×</text>
				</view>
				<view class="filter-content">
					<view class="filter-section">
						<text class="section-title">价格区间</text>
						<view class="price-range">
							<view 
								class="price-item" 
								:class="{ active: selectedPriceRange === item.value }"
								v-for="item in priceRanges" 
								:key="item.value"
								@click="selectPriceRange(item.value)"
							>
								<text>{{ item.label }}</text>
							</view>
						</view>
					</view>
					<view class="filter-section">
						<text class="section-title">距离</text>
						<view class="distance-range">
							<view 
								class="distance-item" 
								:class="{ active: selectedDistance === item.value }"
								v-for="item in distanceRanges" 
								:key="item.value"
								@click="selectDistance(item.value)"
							>
								<text>{{ item.label }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="filter-actions">
					<button class="reset-btn" @click="resetFilter">重置</button>
					<button class="confirm-btn" @click="applyFilter">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			currentCategory: 0,
			refreshing: false,
			hasMore: true,
			currentSort: { id: 1, name: '综合排序' },
			selectedPriceRange: '',
			selectedDistance: '',
			
			// 分类数据
			categories: [
				{ id: 0, name: '全部', icon: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?w=100&h=100&fit=crop' },
				{ id: 1, name: '美食', icon: 'https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=100&h=100&fit=crop' },
				{ id: 2, name: '购物', icon: 'https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=100&h=100&fit=crop' },
				{ id: 3, name: '娱乐', icon: 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=100&h=100&fit=crop' },
				{ id: 4, name: '酒店', icon: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=100&h=100&fit=crop' },
				{ id: 5, name: '生活', icon: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=100&h=100&fit=crop' },
				{ id: 6, name: '医疗', icon: 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=100&h=100&fit=crop' }
			],
			
			// 商家列表数据
			merchantList: [
				{
					id: 1,
					name: '海底捞火锅(万达店)',
					description: '正宗川味火锅，服务贴心周到',
					image: 'https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=300&h=200&fit=crop',
					rating: 4.8,
					reviewCount: 1256,
					distance: '500m',
					avgPrice: 128,
					tags: ['火锅', '川菜', '服务好']
				},
				{
					id: 2,
					name: '星巴克咖啡(中心店)',
					description: '精品咖啡，舒适环境',
					image: 'https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=300&h=200&fit=crop',
					rating: 4.6,
					reviewCount: 892,
					distance: '300m',
					avgPrice: 45,
					tags: ['咖啡', '甜品', '环境好']
				},
				{
					id: 3,
					name: '万达影城IMAX',
					description: '最新大片，震撼视听体验',
					image: 'https://images.unsplash.com/photo-1489599904472-af35ff2c7c3f?w=300&h=200&fit=crop',
					rating: 4.7,
					reviewCount: 2341,
					distance: '800m',
					avgPrice: 65,
					tags: ['电影', 'IMAX', '设备好']
				},
				{
					id: 4,
					name: '如家酒店(商务店)',
					description: '经济实惠，干净舒适',
					image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=300&h=200&fit=crop',
					rating: 4.3,
					reviewCount: 567,
					distance: '1.2km',
					avgPrice: 188,
					tags: ['酒店', '经济型', '位置好']
				},
				{
					id: 5,
					name: '华润万家超市',
					description: '生活用品齐全，价格实惠',
					image: 'https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=300&h=200&fit=crop',
					rating: 4.4,
					reviewCount: 1123,
					distance: '600m',
					avgPrice: 80,
					tags: ['超市', '生活', '品种全']
				},
				{
					id: 6,
					name: '人民医院',
					description: '三甲医院，医疗设备先进',
					image: 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=300&h=200&fit=crop',
					rating: 4.2,
					reviewCount: 445,
					distance: '1.5km',
					avgPrice: 0,
					tags: ['医院', '三甲', '设备好']
				}
			],
			
			// 排序选项
			sortOptions: [
				{ id: 1, name: '综合排序' },
				{ id: 2, name: '距离最近' },
				{ id: 3, name: '评分最高' },
				{ id: 4, name: '价格最低' }
			],
			
			// 价格区间
			priceRanges: [
				{ label: '不限', value: '' },
				{ label: '50元以下', value: '0-50' },
				{ label: '50-100元', value: '50-100' },
				{ label: '100-200元', value: '100-200' },
				{ label: '200元以上', value: '200-999' }
			],
			
			// 距离区间
			distanceRanges: [
				{ label: '不限', value: '' },
				{ label: '500米内', value: '0-500' },
				{ label: '1公里内', value: '0-1000' },
				{ label: '3公里内', value: '0-3000' },
				{ label: '5公里内', value: '0-5000' }
			]
		}
	},
	
	onLoad() {
		this.loadMerchantList();
	},
	
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		selectCategory(categoryId) {
			this.currentCategory = categoryId;
			this.loadMerchantList();
		},
		
		showSortModal() {
			this.$refs.sortPopup.open();
		},
		
		closeSortModal() {
			this.$refs.sortPopup.close();
		},
		
		selectSort(sortOption) {
			this.currentSort = sortOption;
			this.closeSortModal();
			this.loadMerchantList();
		},
		
		showFilterModal() {
			this.$refs.filterPopup.open();
		},
		
		closeFilterModal() {
			this.$refs.filterPopup.close();
		},
		
		selectPriceRange(value) {
			this.selectedPriceRange = value;
		},
		
		selectDistance(value) {
			this.selectedDistance = value;
		},
		
		resetFilter() {
			this.selectedPriceRange = '';
			this.selectedDistance = '';
		},
		
		applyFilter() {
			this.closeFilterModal();
			this.loadMerchantList();
		},
		
		onRefresh() {
			this.refreshing = true;
			setTimeout(() => {
				this.refreshing = false;
				this.loadMerchantList();
			}, 1000);
		},
		
		loadMore() {
			if (this.hasMore) {
				// 模拟加载更多数据
				setTimeout(() => {
					// 这里可以添加更多数据
					this.hasMore = false; // 暂时设置为没有更多数据
				}, 1000);
			}
		},
		
		loadMerchantList() {
			// 模拟加载数据
			console.log('加载商家列表', {
				category: this.currentCategory,
				sort: this.currentSort,
				priceRange: this.selectedPriceRange,
				distance: this.selectedDistance,
				keyword: this.searchKeyword
			});
		},
		
		goToDetail(merchantId) {
			uni.showToast({
				title: '跳转到商家详情',
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.nearby-container {
	background: #f8f8f8;
	min-height: 100vh;
}

.custom-navbar {
	background: #fff;
	padding-top: var(--status-bar-height);
	
	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		padding: 0 15px;
		
		.navbar-left, .navbar-right {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.iconfont {
				font-size: 20px;
				color: #333;
			}
		}
		
		.navbar-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
		}
	}
}

.search-bar {
	background: #fff;
	padding: 10px 15px;
	border-bottom: 1px solid #f0f0f0;
	
	.search-input {
		display: flex;
		align-items: center;
		background: #f5f5f5;
		border-radius: 20px;
		padding: 8px 15px;
		
		.search-icon {
			font-size: 16px;
			color: #999;
			margin-right: 8px;
		}
		
		input {
			flex: 1;
			font-size: 14px;
			color: #333;
		}
	}
}

.category-nav {
	background: #fff;
	padding: 15px 0;
	border-bottom: 1px solid #f0f0f0;
	
	.category-scroll {
		white-space: nowrap;
	}
	
	.category-list {
		display: flex;
		padding: 0 15px;
		
		.category-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 25px;
			min-width: 60px;
			
			&.active {
				.category-name {
					color: #007AFF;
				}
			}
			
			.category-icon {
				width: 40px;
				height: 40px;
				border-radius: 20px;
				margin-bottom: 5px;
			}
			
			.category-name {
				font-size: 12px;
				color: #666;
			}
		}
	}
}

.filter-bar {
	display: flex;
	background: #fff;
	padding: 12px 15px;
	border-bottom: 1px solid #f0f0f0;
	
	.filter-item {
		display: flex;
		align-items: center;
		margin-right: 30px;
		font-size: 14px;
		color: #333;
		
		.iconfont {
			font-size: 12px;
			margin-left: 4px;
			color: #999;
		}
	}
}

.merchant-list {
	flex: 1;
	padding: 10px 15px;
	
	.merchant-item {
		display: flex;
		background: #fff;
		border-radius: 12px;
		padding: 15px;
		margin-bottom: 10px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		
		.merchant-image {
			width: 100px;
			height: 100px;
			border-radius: 8px;
			margin-right: 15px;
		}
		
		.merchant-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.merchant-header {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-bottom: 5px;
				
				.merchant-name {
					font-size: 16px;
					font-weight: 600;
					color: #333;
					flex: 1;
				}
				
				.merchant-tags {
					display: flex;
					flex-wrap: wrap;
					
					.tag {
						background: #f0f0f0;
						color: #666;
						font-size: 10px;
						padding: 2px 6px;
						border-radius: 10px;
						margin-left: 4px;
						margin-bottom: 2px;
					}
				}
			}
			
			.merchant-desc {
				font-size: 12px;
				color: #999;
				margin-bottom: 8px;
			}
			
			.merchant-rating {
				display: flex;
				align-items: center;
				margin-bottom: 8px;
				
				.rating-stars {
					display: flex;
					margin-right: 5px;
					
					.star {
						font-size: 12px;
						color: #ddd;
						
						&.active {
							color: #ffb400;
						}
					}
				}
				
				.rating-score {
					font-size: 12px;
					color: #333;
					margin-right: 5px;
				}
				
				.rating-count {
					font-size: 10px;
					color: #999;
				}
			}
			
			.merchant-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.merchant-distance {
					display: flex;
					align-items: center;
					font-size: 12px;
					color: #666;
					
					.iconfont {
						font-size: 12px;
						margin-right: 2px;
					}
				}
				
				.merchant-price {
					display: flex;
					align-items: center;
					
					.price-label {
						font-size: 10px;
						color: #999;
						margin-right: 2px;
					}
					
					.price {
						font-size: 16px;
						font-weight: 600;
						color: #ff6b35;
					}
				}
			}
		}
	}
}

.load-more, .no-more {
	text-align: center;
	padding: 20px;
	font-size: 14px;
	color: #999;
}

.sort-modal, .filter-modal {
	background: #fff;
	border-radius: 20px 20px 0 0;
	
	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		border-bottom: 1px solid #f0f0f0;
		
		.modal-title {
			font-size: 16px;
			font-weight: 600;
			color: #333;
		}
		
		.modal-close {
			font-size: 24px;
			color: #999;
		}
	}
}

.sort-options {
	padding: 20px;
	
	.sort-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 0;
		font-size: 14px;
		color: #333;
		border-bottom: 1px solid #f5f5f5;
		
		&.active {
			color: #007AFF;
		}
		
		.iconfont {
			font-size: 16px;
		}
	}
}

.filter-content {
	padding: 20px;
	
	.filter-section {
		margin-bottom: 25px;
		
		.section-title {
			font-size: 14px;
			font-weight: 600;
			color: #333;
			margin-bottom: 15px;
		}
		
		.price-range, .distance-range {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			
			.price-item, .distance-item {
				padding: 8px 16px;
				background: #f5f5f5;
				border-radius: 20px;
				font-size: 12px;
				color: #666;
				
				&.active {
					background: #007AFF;
					color: #fff;
				}
			}
		}
	}
}

.filter-actions {
	display: flex;
	padding: 20px;
	gap: 15px;
	
	.reset-btn, .confirm-btn {
		flex: 1;
		height: 44px;
		border-radius: 22px;
		font-size: 16px;
		border: none;
		
		&.reset-btn {
			background: #f5f5f5;
			color: #666;
		}
		
		&.confirm-btn {
			background: #007AFF;
			color: #fff;
		}
	}
}
</style>